<template lang="pug">
  .clearfix
    //- 仅查看详情时显示
    .clearfix(v-if="isOnlyView")
      .form-shebao-title.font-16.font-weight 公积金
      include ./formGongjijinFilter.pug
      Table(border :columns="gongjijinThead" :data="tableData" :stripe="true" ref="demoTable")
        .clearfix.pr-24.pl-24.font-14(slot-scope="{ row, index }" slot="leftTitle")
          span(v-if="index === 0") 基数
          span(v-if="index === 1") 比例

      .h24

      .form-shebao-title.font-16.font-weight 公积金记录
      Table(border :columns="gongjijinjiluThead" :data="recordTableData" :stripe="true" ref="demoTable")

      .clearfix.text-center.mt-20.mb-20(v-if="isOnlyView")
        Button.mr-10(type="info" @click="handlepageUp") 查看上一页
        Button.mr-10(type="info" @click="handleModify") 修改
        Button(type="info" @click="handlepageDown" v-if="[23, 123].indexOf(serviceFeeType) !== -1") 查看下一页

    //- 新建或修改时显示
    .clearfix(v-if="!isOnlyView")
      .form-shebao-title.font-16.font-weight 公积金

      include ./formGongjijinFilter.pug
      include ./formGongjijin.pug

      //- 参保信息设置页面时的按钮
      .clearfix.text-center.mt-20.mb-20(v-if="isInsuranceInfoSet")
        Button.mr-10(type="info" @click="handleSubmit") 保存
        Button(type="info" @click="goEmployeeBookList") 返回员工花名册列表

      //- 新建或修改时的按钮
      .clearfix.text-center.mt-20.mb-20(v-else)
        Button.mr-10(type="info" @click="handlepageUp") 上一步
        Button.mr-10(type="info" @click="handleSubmit") 保存
        Button(type="info" @click="handlepageDown" v-if="[23, 123].indexOf(serviceFeeType) !== -1"  :disabled="!isNext || !employeeId") 下一步
</template>

<script>
import { EmployeesApi } from '@/api/Employees.api.js'
import { SysWelfarePercentEmployeeConfigApi } from '@/api/SysWelfarePercentEmployeeConfig.api.js'
import { SysWelfarePercentAreaConfigApi } from '@/api/SysWelfarePercentAreaConfig.api.js'
import { FormGongjijinFilter, FormGongjijinFilterItem, FormGongjijinTitle, FormGongjijin, FormGongjijinItem } from '../EBformData.js'
import { gongjijinThead, gongjijinjiluThead } from '../EBtableHead.js'
import _cloneDeep from 'clone-deep'
import { Common } from '@/utils/common.js'
import { EBbase } from '../EBbase.js'
export default {
  name: '',

  props: {
    serviceFeeType: {
      type: Number,
      default: 0
    },
    // companyId: {
    //   type: String,
    //   default: ''
    // },
    // companyName: {
    //   type: String,
    //   default: ''
    // },
    // employeeId: {
    //   type: String,
    //   default: ''
    // },
    isOnlyView: {
      type: Boolean,
      default: false
    },
    isInsuranceInfoSet: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      employeeId: '', // 员工ID
      companyId: '', // 公司ID
      companyName: '', // 公司名称
      insuranceId: '', // 保险ID
      formGongjijinFilter: _cloneDeep(FormGongjijinFilter),
      formGongjijinFilterItem: _cloneDeep(FormGongjijinFilterItem),
      formGongjijinTitle: _cloneDeep(FormGongjijinTitle),
      formGongjijin: _cloneDeep(FormGongjijin),
      formGongjijinItem: _cloneDeep(FormGongjijinItem),
      rules: {},
      SecurityId: '', // 公积金方案ID
      arrListDown: {
        securitys: [],
        securitysPlay2: []
      },
      gongjijinThead: _cloneDeep(gongjijinThead),
      gongjijinjiluThead: _cloneDeep(gongjijinjiluThead),
      tableData: [],
      recordTableData: [],
      selectedId: '',
      configInfo: {},
      isNext: false,
      dateOptions: {
        disabledDate (date) {
          const disabledDay = date.getDate()
          const month = date.getMonth()
          const nowMonth = (new Date()).getMonth()
          if (month === nowMonth) {

          } else {
            return disabledDay !== 1
          }
        }
      }
    }
  },

  watch: {
  },

  mounted () {
    this.employeeId = this.$route.query.employeeId // 员工ID
    this.companyId = this.$route.query.companyId // 公司ID
    this.companyName = this.$route.query.companyName // 公司名称
    console.log('公积金版块读取父页面的参保种类：' + this.serviceFeeType)

    EBbase.getAddModel(2, this.companyId, this.arrListDown)
    EBbase.getConfig(2, this.employeeId, this.configInfo, this.insuranceId, this.arrListDown, this.isOnlyView, this.formGongjijinFilter, this.formGongjijin, this.tableData)
    // if (this.$route.query.isModify) { // isModify参数为true时，不限制下一步
    //   this.isNext = true
    // }
    this.isNext = !this.$route.query.isCreateNew || this.$route.query.employeeId
    console.log('员工公积金this.isNext: ', this.isNext)
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
      console.log('...values: ', ...values)
    },

    async handleSubmit (name) {
      let formSum = { ...this.formGongjijinFilter, ...this.formGongjijin }
      var tempAmounts = []

      for (var item in this.formGongjijin) {
        var aloneObg = {
          SecurityTypeCode: item,
          CompanyBaseAmount: this.formGongjijin[item].Company.baseAmount,
          EmployeeBaseAmount: this.formGongjijin[item].Employee.baseAmount
        }
        tempAmounts.push(aloneObg)
      }

      var params = {
        id: EBbase.insuranceId,
        securityType: 2, // 参保类型（1社会保险、2公积金）
        rangeGUID: this.formGongjijinFilter.rangeGUID, // 公积金编号
        employeeGUID: this.employeeId, // 员工ID
        securityGUID: this.formGongjijinFilter.securityGUID, // 公积金方案
        insuredTime: this.formGongjijinFilter.insuredTime, // 参保时间
        description: this.formGongjijinFilter.description, // 备注
        amounts: tempAmounts
      }
      let res = await SysWelfarePercentEmployeeConfigApi.saveShebaoOrGongjijin(params)
      console.log('提交表单res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.isNext = true
        this.$emit('saveSuccess', res.data.data)
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 上一步
    handlepageUp () {
      if ([2, 23].indexOf(this.serviceFeeType) !== -1) { // 参保种类选择了'公积金' || '公积金+商保'
        Common.pageUp(this, 3)
      } else {
        Common.pageUp(this)
      }
    },

    // 下一步
    handlepageDown () {
      Common.pageDown(this, 6) // '公积金'的下一个页面是'商保'，这个不会变
    },

    // 获取公积金方案
    async getPlanList (selectId, securityType) {
      EBbase.getPlanList(selectId, securityType, this.arrListDown)
      this.formGongjijinFilter.securityGUID = ''
    },

    // 获取新增时参保区域基数配置信息列表
    async getAddModel2 (selectId, securityType, companyId) {
      EBbase.getAddModel2(selectId, securityType, this.companyId, this.formGongjijin)
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      let arr = value.map((item) => {
        return item.id
      })
      this.selectedId = arr.join(',')
      console.log('列表勾选', this.selectedId)
    },

    // 修改
    handleModify () {
      this.isNext = true
      this.$emit('handleModify', 5)
    },

    // 输入框失去焦点时触发
    async inputOnBlur (form, sectionTitle, itemTitle, row, precision) {
      var params = {
        money: row.baseAmount,
        precision: precision,
        percent: row.percent
      }
      let res = await SysWelfarePercentAreaConfigApi.getTotalAmount(params)
      if (res.status === 200 && res.data.success) {
        this[form][sectionTitle][itemTitle].totalAmount = res.data.data
      }
    },

    // 输入补缴月数计算参保时间
    toCountDate (form, month) {
      EBbase.toCountDate(this.formGongjijinFilter, month)
    },

    // 输入参保时间计算补缴月数
    toCountMonth (form, date) {
      EBbase.toCountMonth(this.formGongjijinFilter, date)
    },

    // 返回员工花名册列表
    goEmployeeBookList () {
      EBbase.goEmployeeBookList(this.$router, this.companyId, this.companyName)
    }
  }
}
</script>

<style lang="less" scope>
</style>
